<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>摄影师详情</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    :root {
      --primary-color: #07c160;
      --secondary-color: #f8f8f8;
      --text-color: #333;
      --light-text: #666;
      --border-color: #eaeaea;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--text-color);
      background-color: #f5f5f5;
      margin: 0;
      padding: 0;
      line-height: 1.5;
    }
    
    .container {
      max-width: 100%;
      padding: 0;
      overflow-x: hidden;
    }
    
    /* 顶部导航栏 */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 44px;
      background-color: transparent;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 10px 15px;
    }
    
    .navbar-back {
      width: 30px;
      height: 30px;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      cursor: pointer;
    }
    
    .navbar-action {
      display: flex;
      gap: 15px;
    }
    
    .action-btn {
      width: 30px;
      height: 30px;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      cursor: pointer;
    }
    
    /* 摄影师封面 */
    .photographer-cover {
      position: relative;
      height: 60vh;
      overflow: hidden;
    }
    
    .cover-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .cover-gradient {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50%;
      background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    }
    
    .photographer-info {
      position: absolute;
      bottom: 20px;
      left: 20px;
      right: 20px;
      color: white;
    }
    
    .photographer-name {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .photographer-desc {
      font-size: 14px;
      margin-bottom: 10px;
      opacity: 0.9;
    }
    
    .photographer-stats {
      display: flex;
      gap: 15px;
      font-size: 13px;
    }
    
    .stat-item {
      display: flex;
      align-items: center;
    }
    
    .stat-item i {
      margin-right: 5px;
    }
    
    /* 内容区域 */
    .content-section {
      background-color: white;
      border-radius: 12px 12px 0 0;
      margin-top: -20px;
      position: relative;
      padding: 20px;
    }
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .section-title .more {
      font-size: 14px;
      font-weight: normal;
      color: var(--light-text);
    }
    
    /* 标签样式 */
    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .tag {
      padding: 6px 12px;
      background-color: var(--secondary-color);
      border-radius: 20px;
      font-size: 13px;
      color: var(--light-text);
    }
    
    /* 作品展示 */
    .portfolio {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
      margin-bottom: 20px;
    }
    
    .portfolio-item {
      aspect-ratio: 1;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
    }
    
    .portfolio-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    /* 服务套餐 */
    .packages {
      margin-bottom: 20px;
    }
    
    .package-card {
      padding: 15px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      margin-bottom: 15px;
    }
    
    .package-name {
      font-weight: 600;
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;
    }
    
    .package-price {
      color: #ff9500;
    }
    
    .package-desc {
      font-size: 14px;
      color: var(--light-text);
      margin-bottom: 10px;
    }
    
    .package-features {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 10px;
    }
    
    .feature {
      padding: 3px 8px;
      background-color: #f0f0f0;
      border-radius: 4px;
      font-size: 12px;
      color: var(--light-text);
    }
    
    /* 客户评价 */
    .reviews {
      margin-bottom: 20px;
    }
    
    .review-card {
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 15px;
      margin-bottom: 15px;
    }
    
    .reviewer {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .reviewer-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .reviewer-info {
      flex: 1;
    }
    
    .reviewer-name {
      font-weight: 500;
    }
    
    .review-date {
      font-size: 12px;
      color: var(--light-text);
    }
    
    .rating {
      display: flex;
      color: #ffd700;
      margin-bottom: 5px;
    }
    
    .review-content {
      font-size: 14px;
      margin-bottom: 10px;
    }
    
    .review-photos {
      display: flex;
      gap: 5px;
    }
    
    .review-photo {
      width: 70px;
      height: 70px;
      border-radius: 4px;
      object-fit: cover;
    }
    
    /* 底部按钮 */
    .bottom-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      display: flex;
      padding: 10px 15px;
      box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
    }
    
    .contact-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      background-color: white;
      border: 1px solid var(--border-color);
      border-radius: 25px;
      margin-right: 10px;
    }
    
    .book-btn {
      flex: 1;
      height: 50px;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 25px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 顶部导航 -->
    <div class="navbar">
      <div class="navbar-back" onclick="goBack()">
        <i class="fas fa-chevron-left"></i>
      </div>
      <div class="navbar-action">
        <div class="action-btn" onclick="sharePhotographer()">
          <i class="fas fa-share-alt"></i>
        </div>
        <div class="action-btn" onclick="toggleFavorite()" id="favorite-btn">
          <i class="far fa-heart"></i>
        </div>
      </div>
    </div>
    
    <!-- 摄影师封面 -->
    <div class="photographer-cover">
      <img src="https://img.freepik.com/free-photo/attractive-stylish-young-woman-with-photo-camera_171337-9870.jpg" alt="摄影师封面照" class="cover-image">
      <div class="cover-gradient"></div>
      <div class="photographer-info">
        <div class="photographer-name">艾米丽摄影工作室</div>
        <div class="photographer-desc">专业人像摄影师 | 时尚 | 写真 | 私人定制</div>
        <div class="photographer-stats">
          <div class="stat-item">
            <i class="fas fa-star"></i>
            <span>4.9分</span>
          </div>
          <div class="stat-item">
            <i class="fas fa-camera"></i>
            <span>3年经验</span>
          </div>
          <div class="stat-item">
            <i class="fas fa-users"></i>
            <span>已服务2300+人</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="content-section">
      <!-- 标签 -->
      <div class="tags">
        <div class="tag">人像摄影</div>
        <div class="tag">个人写真</div>
        <div class="tag">时尚摄影</div>
        <div class="tag">毕业照</div>
        <div class="tag">情侣写真</div>
        <div class="tag">私人定制</div>
      </div>
      
      <!-- 作品展示 -->
      <div class="section-title">
        <span>作品展示</span>
        <span class="more" onclick="viewAllWorks()">查看全部 <i class="fas fa-chevron-right"></i></span>
      </div>
      
      <div class="portfolio">
        <div class="portfolio-item" onclick="viewPhotoDetail(1)">
          <img src="https://img.freepik.com/free-photo/young-beautiful-smiling-female-trendy-summer-hipster-clothes_158538-366.jpg" alt="作品1" class="portfolio-image">
        </div>
        <div class="portfolio-item" onclick="viewPhotoDetail(2)">
          <img src="https://img.freepik.com/free-photo/pretty-young-stylish-sexy-woman-pink-luxury-dress-summer-fashion-trend_285396-9866.jpg" alt="作品2" class="portfolio-image">
        </div>
        <div class="portfolio-item" onclick="viewPhotoDetail(3)">
          <img src="https://img.freepik.com/free-photo/portrait-of-beautiful-eastern-girl-with-professional-evening-make-up-on-abstract-background_613910-14733.jpg" alt="作品3" class="portfolio-image">
        </div>
        <div class="portfolio-item" onclick="viewPhotoDetail(4)">
          <img src="https://img.freepik.com/free-photo/portrait-of-young-blonde-woman-with-blue-eyes_149155-15636.jpg" alt="作品4" class="portfolio-image">
        </div>
        <div class="portfolio-item" onclick="viewPhotoDetail(5)">
          <img src="https://img.freepik.com/free-photo/young-asian-woman-posing-outdoors-looking-camera_1301-7355.jpg" alt="作品5" class="portfolio-image">
        </div>
        <div class="portfolio-item" onclick="viewPhotoDetail(6)">
          <img src="https://img.freepik.com/free-photo/portrait-of-japanese-woman-with-red-lipstick_23-2149500035.jpg" alt="作品6" class="portfolio-image">
        </div>
      </div>
      
      <!-- 服务套餐 -->
      <div class="section-title">
        <span>服务套餐</span>
      </div>
      
      <div class="packages">
        <div class="package-card" onclick="selectPackage('standard')">
          <div class="package-name">
            <span>标准套餐</span>
            <span class="package-price">¥199</span>
          </div>
          <div class="package-desc">适合简单的个人写真需求，提供基础的拍摄服务</div>
          <div class="package-features">
            <div class="feature">1小时拍摄</div>
            <div class="feature">1套服装</div>
            <div class="feature">10张精修</div>
            <div class="feature">电子版交付</div>
          </div>
        </div>
        
        <div class="package-card" onclick="selectPackage('premium')">
          <div class="package-name">
            <span>高级套餐</span>
            <span class="package-price">¥299</span>
          </div>
          <div class="package-desc">专业的人像拍摄，更多服装选择和精修张数</div>
          <div class="package-features">
            <div class="feature">2小时拍摄</div>
            <div class="feature">2套服装</div>
            <div class="feature">15张精修</div>
            <div class="feature">电子版交付</div>
            <div class="feature">提供简单道具</div>
          </div>
        </div>
        
        <div class="package-card" onclick="selectPackage('deluxe')">
          <div class="package-name">
            <span>豪华套餐</span>
            <span class="package-price">¥499</span>
          </div>
          <div class="package-desc">全方位专业服务，包含多场景拍摄和精细修图</div>
          <div class="package-features">
            <div class="feature">3小时拍摄</div>
            <div class="feature">3套服装</div>
            <div class="feature">20张精修</div>
            <div class="feature">化妆服务</div>
            <div class="feature">多场景拍摄</div>
            <div class="feature">精美相册</div>
          </div>
        </div>
      </div>
      
      <!-- 客户评价 -->
      <div class="section-title">
        <span>客户评价</span>
        <span class="more" onclick="viewAllReviews()">查看全部 <i class="fas fa-chevron-right"></i></span>
      </div>
      
      <div class="reviews">
        <div class="review-card">
          <div class="reviewer">
            <img src="https://img.freepik.com/free-photo/portrait-of-young-asian-woman_23-2148354632.jpg" alt="评价人头像" class="reviewer-avatar">
            <div class="reviewer-info">
              <div class="reviewer-name">小李</div>
              <div class="review-date">2023-04-15</div>
            </div>
          </div>
          <div class="rating">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
          </div>
          <div class="review-content">
            摄影师很专业，拍摄过程很愉快，照片质量也很高，非常满意这次的拍摄体验！摄影师会给予很多pose的指导，解决了我不知道怎么摆姿势的尴尬。
          </div>
          <div class="review-photos">
            <img src="https://img.freepik.com/free-photo/portrait-of-cheerful-woman_171337-4648.jpg" alt="评价照片" class="review-photo">
            <img src="https://img.freepik.com/free-photo/portrait-of-beautiful-woman-with-smokey-eyes-makeup_186202-5473.jpg" alt="评价照片" class="review-photo">
          </div>
        </div>
        
        <div class="review-card">
          <div class="reviewer">
            <img src="https://img.freepik.com/free-photo/portrait-of-smiling-young-man-with-crossed-arms_171337-4613.jpg" alt="评价人头像" class="reviewer-avatar">
            <div class="reviewer-info">
              <div class="reviewer-name">阿强</div>
              <div class="review-date">2023-04-02</div>
            </div>
          </div>
          <div class="rating">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>
          <div class="review-content">
            帮女朋友预约的生日写真，她很满意！摄影师很有耐心，照片角度很好，修图也很自然，没有那种过度修图的感觉。
          </div>
          <div class="review-photos">
            <img src="https://img.freepik.com/free-photo/beautiful-woman-city_1157-16447.jpg" alt="评价照片" class="review-photo">
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部按钮 -->
    <div class="bottom-bar">
      <button class="contact-btn" onclick="contactPhotographer()">
        <i class="fas fa-comment"></i>
      </button>
      <button class="book-btn" onclick="bookNow()">立即预约</button>
    </div>
  </div>

  <script>
    let isFavorite = false;
    
    // 返回上一页
    function goBack() {
      history.back();
    }
    
    // 分享摄影师
    function sharePhotographer() {
      alert('分享功能（在实际应用中会打开分享菜单）');
    }
    
    // 收藏/取消收藏
    function toggleFavorite() {
      isFavorite = !isFavorite;
      const favBtn = document.getElementById('favorite-btn');
      
      if (isFavorite) {
        favBtn.innerHTML = '<i class="fas fa-heart" style="color: #ff4d4f;"></i>';
        alert('已添加到收藏');
      } else {
        favBtn.innerHTML = '<i class="far fa-heart"></i>';
        alert('已取消收藏');
      }
    }
    
    // 查看所有作品
    function viewAllWorks() {
      alert('查看全部作品（在实际应用中会跳转到作品集页面）');
    }
    
    // 查看照片详情
    function viewPhotoDetail(id) {
      alert(`查看照片详情 ID: ${id}（在实际应用中会显示大图浏览）`);
    }
    
    // 选择套餐
    function selectPackage(packageType) {
      let packageName, packagePrice;
      
      switch(packageType) {
        case 'standard':
          packageName = '标准套餐';
          packagePrice = '¥199';
          break;
        case 'premium':
          packageName = '高级套餐';
          packagePrice = '¥299';
          break;
        case 'deluxe':
          packageName = '豪华套餐';
          packagePrice = '¥499';
          break;
      }
      
      alert(`已选择${packageName}，价格${packagePrice}（在实际应用中会带入预约页面）`);
    }
    
    // 查看所有评价
    function viewAllReviews() {
      alert('查看全部评价（在实际应用中会跳转到评价列表页）');
    }
    
    // 联系摄影师
    function contactPhotographer() {
      alert('联系摄影师（在实际应用中会跳转到聊天页面）');
    }
    
    // 立即预约
    function bookNow() {
      window.location.href = 'booking.html';
    }
  </script>
</body>
</html> 